<template>
    <div>
        <!-- 头部开始 -->
        <div style="height:60px;background-color: #3c7fff;display:flex;align-items: center;">
            <div style="width:200px;display:flex;align-items: center;font-size:20px;color:white;">
                <img style="width:40px;color:white;margin-left:5px;" src="../assets/logo2.png">
                <span style="font-size:24px;color:white;margin-left:5px;">
                    后台管理系统
                </span>
            </div>
            <div style="flex:1">
                
            </div>
            <div style="display:flex;width:150px;align-items: center; width:fit-content;padding-right:10px;">
                <img :src="data.user.avatar?data.user.avatar:'../assets/images/2.jpg'" alt="" style="width:40px;height:40px;cursor: pointer;" @click="showInfo">
                <span style="color:white;margin-left:5px;">{{ data.user.nickName }}</span>
            </div>
        </div>
        <!-- 头部结束 -->
        <!-- 下面部分开始 -->
        <div style="display:flex;">
            <!--左侧导航菜单开始-->
            <div style="width:200px;border-right:1px solid #ddd;min-height:calc( 100vh - 60px )">
                <el-menu router :default-active="router.currentRoute.value.path" style="border:0;">
                    <el-menu-item index="/manager/home">
                        <el-icon><House /></el-icon>
                        系统首页
                    </el-menu-item>
                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon><Setting /></el-icon>
                            <span>系统管理</span>
                        </template>
                        <el-menu-item index="/manager/org"><el-icon><Grid /></el-icon>机构管理</el-menu-item>
                        <el-menu-item index="/manager/user"><el-icon><User /></el-icon>用户管理</el-menu-item>
                        <el-menu-item><el-icon><CircleCheck /></el-icon>角色管理</el-menu-item>
                        <el-menu-item><el-icon><Operation /></el-icon>资源管理</el-menu-item>
                        <el-menu-item index="/manager/updatePassword"><el-icon><Key /></el-icon>修改密码</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon><Document /></el-icon>
                            <span>文章管理</span>
                        </template>
                        <el-menu-item index="/manager/article"><el-icon><Reading /></el-icon>文章列表</el-menu-item>
                    </el-sub-menu>
                    <el-menu-item index="/manager/data">
                        <el-icon><DataAnalysis /></el-icon>
                        数据统计
                    </el-menu-item>
                    <el-menu-item index="3">
                        <el-icon><UserFilled /></el-icon>
                        个人信息
                    </el-menu-item>
                    <el-menu-item index="4" @click="logout">
                        <el-icon><SwitchButton /></el-icon>
                        退出登录
                    </el-menu-item>
                </el-menu>
            </div>
            <!--左侧导航菜单结束-->
            <!--右侧主体区域开始-->
            <div style="flex:1;width:0;background-color: #f8f8ff;padding:10px;">
                <RouterView />

            </div>
            <!--右侧主体区域结束-->
        </div>
        <!-- 下面部分结束 -->
         <!-- 新增编辑弹出框 -->
        <el-dialog v-model="data.formVisible" title="编辑个人信息" width="500" destroy-on-close>
            <el-form ref="formRef" :rules="data.rules" :model="data.form" style="margin:20px;" label-width="auto">
                <el-form-item label="头像" style="text-align: center;">
                    <el-upload class="avatar-uploader" 
                        action="http://localhost:8088/files/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        >
                        <img v-if="data.form.avatar" :src="data.form.avatar" class="avatar"/>
                        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                    </el-upload>
                </el-form-item>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="data.form.username" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="昵称" prop="nickName">
                    <el-input v-model="data.form.nickName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="性别">
                    <el-radio-group v-model="data.form.sex">
                        <el-radio value="1" label="男"></el-radio>
                        <el-radio value="2" label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="data.form.idcard" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="联系电话">
                    <el-input v-model="data.form.phone" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="Email">
                    <el-input v-model="data.form.email" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="用户状态">
                    <el-radio-group v-model="data.form.status">
                        <el-radio value="0" label="正常"></el-radio>
                        <el-radio value="1" label="停用"></el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="data.formVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">保存</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 新增编辑弹出框结束 -->
    </div>
</template>
<script setup>
import router from "@/router/index.js"
import { reactive,ref } from "vue";
import request from "@/utils/request";

const formRef = ref()
const data = reactive({
    user:JSON.parse(localStorage.getItem('x-user')),
    formVisible: false,
    form:{},
    rules:{
        username:[
            {required:true,message:'请输入账号',trigger:'blur'}
        ],
        nickName:[
            {required:true,message:'请输入昵称',trigger:'blur'}
        ]
    }
})

const logout = ()=>{
    localStorage.removeItem("x-user")
    router.push("/login")
}
const showInfo=()=>{
    data.form = data.user
    data.formVisible = true
}

const handleAvatarSuccess= (res)=>{
    console.log(res.data)
    data.form.avatar=res.data;
}
const save=()=>{
    formRef.value.validate((valid)=>{
            update()
    })
}

const update=()=>{
    request.put('/system/user/update',data.form).then(res=>{
        if(res.code===0){
            data.formVisible=false
            ElMessage.success("操作成功")
            localStorage.setItem('x-user',JSON.stringify(res.data))
        }else{
            ElMessage.error(res.message)
        }
    })
}
</script>
<style scope>
    .el-menu .is-active{
        background-color: #c1e0f1;
    }
    .el-menu .is-active .el-sub-menu__title{
        background-color:#9d9cf5;
    }

    .avatar-uploader .avatar{
        width: 178px;
        height:178px;
        display:block;
    }
    
</style>
<style>
.avatar-uploader .el-upload{
        border:1px dashed var(--el-border-color);
        border-radius:6px;
        cursor:pointer;
        position:relative;
        overflow:hidden;
        transition:var(--el-transition-duration-fast);
    }
    .avatar-uploader .el-upload:hover{
        border-color:var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon{
        font-size:28px;
        color:#8c939d;
        width:178px;
        height:178px;
        text-align:center;
    }
</style>